<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2021/10/6
  Time: 18:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
    <link href="${pageContext.request.contextPath}/css/vip/savevip.css" rel="stylesheet">
    <style>
        body{
            min-width: 1500px;
        }
       .main{
           background-color: #0a53be;
           margin-top: 40px;
           width: 30%;
           height: 640px;
           margin-left:100px
       }
    </style>
</head>
<body>
<div class="nav">
    <div class="head-logo">
        <a href="" ></a>
    </div>
    <div class="head-nav">
        <ul>
            <li><a href="" class="first-item">首页</a> </li>
            <li><a href="">手机端</a> </li>
            <li><a href="">成为房东</a> </li>
            <li><a href="${pageContext.request.contextPath}/order_payment/myorder.jsp">房源订单中心</a> </li>
            <li><a href="${pageContext.request.contextPath}/users/personal_center.jsp">个人中心</a> </li>
            <li><a href="">帮助</a> </li>
        </ul>
    </div>
    <div class="head-login">
        <c:if test="${empty loginCustomer}">
            <a href="${pageContext.request.contextPath}/users/login.jsp">
                <img class="login-logo" src="${pageContext.request.contextPath}/image/login-logo.svg"/>
                <span class="login-title">登录</span>
            </a>
            <a href="">
                <img class="regist-logo" src="${pageContext.request.contextPath}/image/regist-logo.svg" >
                <span class="login-title">注册</span>
            </a>
        </c:if>
        <c:if test="${!empty loginCustomer}">
            欢迎${loginCustomer.cusNickname}登录，<a href="">退出</a>
        </c:if>
    </div>
</div>
<div class="main">
    <span style="color: #ff0000;font-size: 8px"> ${addMessage}</span>
    <form class="vip_from" action="${pageContext.request.contextPath}/vip" method="post">
        <label>会员类型</label><br/>
        <input type="radio" name="card" class="card_type" value="包月" checked>包月
        <input type="radio" name="card" class="card_type" value="包季">包季
        <input type="radio" name="card" class="card_type" value="包年">包年<br/>
        <label>会员价格</label><br/>
        <span>￥</span>
        <span  class="price_vip" ></span><br/>
        <label>开始时间</label>
        <span class="start_Time" ></span> <br/>
        <label>结束时间</label>
        <span  class="end_Time" ></span> <br/>
        <input type="submit" value="购买" class="save_sub"/>
        <input type="submit" value="续费" class="update_sub"/>
    </form>

</div>
</body>
</html>
<script>
    var price;
   $(".card_type").click(function () {
       var startTime= new Date();
       var endTime=new Date();
       var typt =$("input[name='card']:checked").val();
       if (typt === "包月"){
           price = 30;
           endTime.setMonth(startTime.getMonth()+1) ;
       }else if (typt === "包季"){
           price=50;
           endTime.setMonth(startTime.getMonth()+3);
       }else {
           price=120;
           endTime.setFullYear(startTime.getFullYear()+1);
       }
       function formatDate(date) {
           var YY = date.getFullYear() + '-';
           var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
           var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
           return YY + MM + DD ;
       }
       $(".end_Time").html("");
       $(".start_Time").html("");
       $(".price_vip").html("");
       $(".start_Time").html(formatDate(startTime));
       $(".end_Time").html(formatDate(endTime));
       $(".price_vip").html(price);
   });
    $(document).ready(function () {

          console.log($(".vip_from").val()) ;
    })
</script>
